<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>地图导航</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #container {
        width: 100%;
        height: 100vh;
      }
    </style>
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "你的密钥",
      }
    </script>
    <script
            type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"
    ></script>
</head>
<body>
<div id="container"></div>
<script>
     var map = new AMap.Map("container", {
        zoom: 15, //级别
        center: [116.397428, 39.90923], //中心点坐标
      })

      window.onload = function () {
          if(window.shenling) {
            <!-- 调用原生的方法 -->
<!--            shenling.alert("调用了原生的SDK")-->
            shenling.getLocation("showLocation")
          }
      }
      <!-- web端的方法 -->
      function test () {
        shenling.alert("这是web端的test方法")
      }

      function showLocation (lon, lat) {
        // 将坐标定位到对应的经纬度上
        map.setZoomAndCenter(18, [lon, lat])
         map.plugin(["AMap.PlaceSearch"], function () {
          var MSearch = new AMap.PlaceSearch({
            pageSize: 4,
            pageIndex: 1, //请求页码，默认1
            extensions: "base", //返回信息详略，默认为base（基本信息）
          }) //构造PlaceSearch类
          AMap.event.addListener(MSearch, "complete", (result) => {
<!--            shenling.alert(JSON.stringify(result))-->
            shenling.receiveData("search_list", JSON.stringify(result?.poiList?.pois || []))
          }) //返回结果
          MSearch.searchNearBy("地点", new AMap.LngLat(lon, lat)) //关键字查询
        })
      }

<!--      这是与原生端通信的方式  -->
<!--      var h5Port-->
<!--      window.addEventListener("message", function (event) {-->
<!--        if (event.data == "__init_port__") {-->

<!--            h5Port =  event.ports[0]-->
<!--            h5Port.postMessage(JSON.stringify({ type: 'connect_ok' })) // 告知原生连接成功-->
<!--        }-->
<!--      })-->
    </script>
</body>
</html>
